<template>
  <div class="real-time-component-list">
    <div class="media-header">
      <el-button icon="el-icon-upload2" :disabled="disableToUp" @click="upComponent"></el-button>
      <el-button icon="el-icon-download" :disabled="disableToDown" @click="downComponent"></el-button>
      <el-button icon="el-icon-delete" :disabled="disableToDel" @click="deleteComponent"></el-button>
    </div>
    <div
      v-for="(item, index) in componentData"
      :key="item.id"
      class="item"
      :class="{ actived: index === curComponentIndex }"
      @click="onClick(index)"
    >
      <div class="icon">
        <svg-icon :icon-class="areaTypeComponent[item.type].toLocaleLowerCase()" />
      </div>
      <div class="name">{{ areaTypeName[item.type] }}</div>
    </div>
    <div v-if="!componentData.length" class="tip">暂无媒体组件</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { areaTypeComponent, areaTypeName } from '@/custom-component/component-list'
import { get } from 'lodash'

export default {
  name: 'RealTimeComponentList',
  data() {
    return {
      areaTypeComponent,
      areaTypeName,
    }
  },
  computed: {
    ...mapState(['curComponent', 'curComponentIndex', 'canvasStyleData', 'curCanvasPageIndex', 'componentData']),
    disableToDel() {
      return this.componentData.length === 0
    },
    disableToUp() {
      return this.curComponentIndex === 0 || this.componentData.length === 0
    },
    disableToDown() {
      return this.curComponentIndex === this.componentData.length - 1 || this.componentData.length === 0
    },
  },
  methods: {
    transformIndex(index) {
      return this.componentData.length - 1 - index
    },

    onClick(index) {
      this.setCurComponent(index)
    },

    deleteComponent() {
      this.$store.commit('deleteComponent')
    },

    upComponent() {
      this.$store.commit('upComponent')
    },

    downComponent() {
      this.$store.commit('downComponent')
    },

    setCurComponent(index) {
      this.$store.commit('setCurComponent', { component: this.componentData[index], index })
    },
  },
}
</script>

<style lang="scss" scoped>
.real-time-component-list {
  position: relative;
  height: calc(100vh - 120px);
  overflow-y: auto;

  .item {
    text-align: center;
    color: #333;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 10px;
    position: relative;
    user-select: none;
    opacity: 1;
    border: 1px solid #f1f1f1;
    &:hover {
      background-color: rgba(200, 200, 200, 0.2);

      .icon-container {
        display: block;
      }
    }

    .iconfont {
      margin-right: 4px;
      font-size: 16px;
    }

    .icon-container {
      position: absolute;
      right: 10px;
      display: none;
      .icon {
        cursor: pointer;
        margin: 0 2px;
      }
    }

    .name {
      line-height: 20px;
    }

    > .icon {
      display: flex;
      align-items: center;
      margin-right: 6px;
    }
  }

  .actived {
    background: #ecf5ff;
    color: #409eff;
    .icon {
      fill: #409eff;
    }
  }

  .tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
  }

  .media-header {
    display: flex;
    justify-content: space-between;
    margin: 10px;
  }
}
</style>
